<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { reactive, ref, onMounted } from 'vue';
import { useStudentStore } from '@/stores/student';
import { usePointStore } from '@/stores/point';
// import { useHomeworkStore } from '@/stores/homework';
import useCourseStore from '@/stores/course';
import { useTokenStore } from '@/stores/token';

const search = ref('');
const studentStore = useStudentStore();
const router = useRouter();
// 退出登录，删除各项信息
const logout = () => {
    studentStore.studentLogout();
    useCourseStore().removeCourseInfo();
    usePointStore().removeData();
    useTokenStore().removeToken();
    router.replace({ path: '/login' })
}

</script>

<template>
    <el-container>
        <el-header class="head">
            <div class="tabbar_left">
                <el-icon style="font-size: 30px;">
                    <Grape />
                </el-icon>
                <p style="font-family: 'Zhi Mang Xing', cursive; font-size: 27px; width: 500px;">
                    基于知识点融合教学网站</p>
                <el-menu router :default-active="$route.path" mode="horizontal" style="margin-left: 35px;width: 100%;">
                    <el-menu-item index="/studentLayout/homeStudent">首页</el-menu-item>
                    <el-menu-item index="/studentLayout/courseStudent">课程</el-menu-item>
                    <el-menu-item index="/studentLayout/discusion">讨论</el-menu-item>
                    <el-menu-item index="/studentLayout/studentPoint">知识点</el-menu-item>
                </el-menu>
            </div>
            <div class="tabbar_right">
                <el-input v-model="search" style="width: 240px;margin-right: 20px;" placeholder="search somrthing"
                    :prefix-icon="Search" />
                <!-- 右侧 设置-->
                <el-button size="small" icon="Moon" circle></el-button>
                <!--userStore.studentInfo.avatar  -->
                <el-image class="el-img" :src="studentStore.studentInfo.avatar" fit="cover"></el-image>
                <!-- 下拉菜单 -->
                <el-dropdown>
                    <span class="el-dropdown-link">
                        <!-- 用户名 -->
                        {{ studentStore.studentInfo.username ? studentStore.studentInfo.username : "login" }}
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu style="cursor: pointer;">
                            <el-dropdown-item
                                @click="router.replace({ path: '/studentLayout/studentMessage' })">个人设置</el-dropdown-item>
                            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </el-header>

        <!-- 空白占位元素 -->
        <div class="header-placeholder"></div>
        <!-- 主体展示 -->
        <el-scrollbar>
            <el-main style="flex: 1;">
                <RouterView />
            </el-main>
        </el-scrollbar>
    </el-container>
</template>

<style scoped>
.head {
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background-color: #fff;
    height: 60px;

    /* background-color: rgb(31, 66, 131); */
    .tabbar_left {
        display: flex;
        align-items: center;
        margin-left: 30px;
    }

    .tabbar_right {
        display: flex;
        align-items: center;
        margin-right: 20px;

        .el-img {
            width: 40px;
            height: 40px;
            margin-left: 20px;
            margin-right: 10px;
            border-radius: 50%;
        }

    }
}

.header-placeholder {
    height: 60px;
    /* 与头部高度相等 */
}
</style>
